<template>
  <div class="el-calendar-wrapper">
    <!-- 年份导航 -->
    <div class="el-calendar-header">
      <el-button-group>
        <el-button size="small" @click="handleCurrentYear(0)" icon="el-icon-arrow-left"></el-button>
        <el-button size="small" disabled>{{ currentYear }}年</el-button>
        <el-button size="small" @click="handleCurrentYear(1)" icon="el-icon-arrow-right"></el-button>
      </el-button-group>
    </div>

    <!-- 月份网格 -->
    <div class="el-calendar-body">
      <div 
        v-for="month in 12" 
        :key="month"
        class="el-calendar-month-cell"
        :class="{
          'current-month': isCurrentMonth(month),
          'selected-month': isSelectedMonth(month),
          'has-event': hasEvent(month)
        }"
        @click="selectMonth(month)"
      >
        <div class="el-calendar-month-header">
          <span>{{ month }}月</span>
          <p style="margin:0px;padding:0px">
            <el-tag 
            v-if="hasEvent(month)"
            size="medium"
            :type="getTagType(month)"
          >
            {{ getJudgement(month) }}
          </el-tag>
          </p> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    eventData: {
      type: Array,
      default: () => [] 
    }
  },  
  data() {
    return {
      currentYear: new Date().getFullYear(),
      selectedMonth: null,
    }
  },
  computed: {
    formattedEvents() {
      return this.eventData.map(item => {
        const [year, month] = item.timeSign.split('-').map(Number)
        return {
          ...item,
          year,
          month
        }
      })
    }
  },
  methods: {
    getMonthEvent(month) {
      return this.formattedEvents.find(event => 
        event.year === this.currentYear && 
        event.month === month
      )
    },
    hasEvent(month) {
      return !!this.getMonthEvent(month)
    },
    getJudgement(month) {
      const event = this.getMonthEvent(month)
      return event ? event.judgement : ''
    },
    getTagType(month) {
      const event = this.getMonthEvent(month)
      if (!event) return 'info'
      
      // 根据judgement返回对应的tag类型
      if (event.judgement === 'I级') return 'danger'
        if (event.judgement === 'II级') return 'warning'
        if (event.judgement === 'III级') return 'primary'
      return 'success'
    },
    isCurrentMonth(month) {
      const today = new Date()
      return (
        today.getFullYear() === this.currentYear && 
        today.getMonth() + 1 === month
      )
    },
    isSelectedMonth(month) {
      return this.selectedMonth === month
    },
    selectMonth(month) {
      this.selectedMonth = month
      this.$emit('month-select', {
        year: this.currentYear,
        month: month
      })
    },
    handleCurrentYear(year) {
      let y = this.currentYear
      if (year == 0) {
        y--
      } else {
        y++
      }
      this.currentYear = y
      this.$emit('changeYear', this.currentYear)
    }
  }
}
</script>

<style scoped>
.el-calendar-wrapper {
  background-color: #FFFFFF;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-calendar-header {
  padding: 12px 20px;
  border-bottom: 1px solid #EBEEF5;
  display: flex;
  justify-content: center;
}

.el-calendar-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px;
}

.el-calendar-month-cell {
  padding: 8px;
  width: 100px;
  min-height: 30px;
  border: 1px solid #EBEEF5;
  transition: all 0.3s;
  cursor: pointer;
}

.el-calendar-month-cell:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-calendar-month-header {
  text-align: center;
  font-size: 14px;
  color: #606266;
  padding: 8px;
  font-weight: bold;
}

.current-month {
  background-color: #F2F6FC;
}

.selected-month {
  border: 1px solid #409EFF !important;
  background-color: #ECF5FF;
}

@media (max-width: 992px) {
  .el-calendar-body { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .el-calendar-body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .el-calendar-body { grid-template-columns: 1fr; }
}
</style>